<template>
  <div class="mocksun">
    <!-- 面包屑 -->
    <Headline :headline1="$t('m.AccessAdmin')+'  /  '" :headline2="$t('m.HolidaySetting')"></Headline>
    <a-card style="width: 100%">
      <div class="search-a ov_flex">
        <a-input-search
          class="input-a"
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          style="height: 32px width:250px"
          size="large"
          v-model="devicefrom.key"
          @search="MockSearch"
        />
        <a-tree-select
          v-model="value"
          show-search
          style="width: 50%; height: 32px  margin-left: 15px;"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          @change="checked"
          tree-default-expand-all
        >
         
          <a-tree-select-node
            v-for="item in items"
            :key="item.id"
            :cont="item"
            :value="item.areaname"
            :title="item.areaname"
          >
            <a-tree-select-node
              v-for="int in item.children"
              :key="int.id"
              :cont="int"
              :value="int.areaname"
              :title="int.areaname"
            >
              <a-tree-select-node
                v-for="ins in int.children"
                :key="ins.id"
                :cont="ins"
                :value="ins.areaname"
                :title="ins.areaname"
              />
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
        <div class="btns">
          <a-button
            @click="TimeDownlode"
            type="primary"
            style="width: 100%; height: 32px"
          >
            {{$t('m.PeriodDownload')}}
          </a-button>
        </div>
        <div class="btns">
          <a-button
            type="primary"
            style="width: 100%; height: 32px"
            @click="settingedit"
            >{{$t('m.NewHoliday')}}</a-button
          >
        </div>

        <div class="chend">
          <a-checkbox :defaultChecked="devicefrom.vChild" @change="textChange">
            {{$t('m.WhetherToDisplayChildNodes')}}
          </a-checkbox>
        </div>
      </div>
      <div id="components-table-demo-size">
        <a-table
          :rowKey="(r, i) => r.id"
          :columns="columns"
          :data-source="datas"
          bordered
          :pagination="false"
          :row-selection="{
            onChange: setSelectChange,
            type: 'checkbox',
            selectedRowKeys: setsclete,
          }"
        >
          <div slot="index" slot-scope="text, tag, i">
            {{ i + 1 }}
          </div>
          <div slot="tags" slot-scope="text, tags, i">
            <a-button
              class="btn"
              type="primary"
              icon="diff"
              @click="viewtime(text, tags, i)"
              >{{$t('m.CheckTheTime')}}</a-button
            >
          </div>
        </a-table>
      </div>
      <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="setPages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChange"
      />
    </a-card>
    <Modal :modal="viewtimes" @modalLast="viewsuns" @modalhand="viewhand">
         <div >
          <a-button
            type="primary"
            style=" height: 32px"
            @click="batchdownload"
            >{{$t('m.DeleteInBatches')}}</a-button
          >
        </div>
      <div id="components-table-demo-size">
        <a-table
          :rowKey="(r, i) => r.id"
          :columns="column"
          :data-source="timedatas"
          bordered
          :pagination="false"
          :row-selection="{
            onChange: batchdSelectChange,
            type: 'checkbox',
            selectedRowKeys: batchdsetsclete,
          }"
        >
          <div slot="tags" slot-scope="text, tags, i">
            <a-button
              class="btn"
              type="primary"
              icon="diff"
              @click="etidtime(text, tags, i)"
              >{{$t('m.ModifyTheHoliday')}}</a-button
            >
          </div>
        </a-table>
      </div>
    </Modal>
        <Modal  :modal="Mokejust" @modalLast="mocksuns" @modalhand="mockhand">
      <a-form-item class="logflex" :label="$t('m.Start')" validate-status="success">
        <a-date-picker v-model="addtimefrom.startDate" @change="ondateChange" />
      </a-form-item>
      <a-form-item class="logflex" :label="$t('m.End')" validate-status="success">
        <a-date-picker v-model="addtimefrom.endDate" @change="endateChange" />
      </a-form-item>
    </Modal>
    <Delete ref="Mockdelete" :dalete="dalete" @confirm="Mockdelete"></Delete>
    <Delete ref="batchdelete" :dalete="daletes" @confirm="batchdelete"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Modal from "@/components/common/Modal";
import Delete from "@/components/Delete";
import { getDevAreaTree } from "@/api/perUnit";
import {
  getDeviceList,
 
} from "@/api/entrance/cloudDoor";
import {

  getDownload,
  getHoliday,
  getSaveHoliday,
  deleteHoliday
} from "@/api/entrance/entranceguard";
export default {
  name: "YunMocksunSetting",
  components: { Headline, Modal, Delete },
  data() {
    return {
      items: [],
      value: "测试大学",
      dalete: {
        titles: this.$t('m.ChangeThePrompt'),
        type: "exclamation-point",
        text: this.$t('m.ConfirmToChange'),
      },
        daletes: {
        titles: this.$t('m.DownloadPrompt'),
        type: "exclamation-point",
        text: this.$t('m.AreYouSureToReDownload'),
      },
      // 配置数据
      columns: [
        {
          title: this.$t('m.SerialNumber'),
          scopedSlots: { customRender: "index" },
        },
        {
          title: this.$t('m.deviceNumber'),
          dataIndex: "machineid",
        },
        {
          title:this.$t('m.Controller'),
          dataIndex: "devname",
        },
        {
          title: this.$t('m.Location'),
          dataIndex: "areaname",
        },
         {
          title: this.$t('m.Operation'),
          key: "tags",
          // dataIndex: "address",
          scopedSlots: { customRender: "tags" },
        },
      ],
      column: [
        {
          title: this.$t('m.DownloadStatus'),
          dataIndex: "statusname",
        },
        {
          title: this.$t('m.Start'),
          dataIndex: "startdate",
        },
        {
          title: this.$t('m.End'),
          dataIndex: "enddate",
        },
        {
          title: this.$t('m.processingTime'),
          dataIndex: "",
        },
        {
          title: this.$t('m.theResults'),
          dataIndex: "",
        },
        {
          title: this.$t('m.ProcessingTimes'),
          dataIndex: "downnum",
        },
        {
          title: this.$t('m.creationTime'),
          dataIndex: "createdate",
        },
        {
          title:this.$t('m.Operation'),
          key: "tags",
          // dataIndex: "address",
          scopedSlots: { customRender: "tags" },
        },
      ],
      datas: [],
      timedatas: [],
      devicefrom: {
        areaCode: "",
        key: "",
        vChild: true,
        start: 0,
        limit: 10,
        page: 1,
      },
      total: 0,
      setsclete: [],
      devIds: "",
      Mokejust: {
        visible: false,
        width: "500px",
        title: this.$t('m.NewHoliday'),
      },
      viewtimes: {
        visible: false,
        width: "1000px",
        title: this.$t('m.CheckTheTime'),
      },
      addtimefrom: {
        id: 0,
        devIds: [],
        startDate: "",
        endDate: "",
      },
      batchdsetsclete:[],
      ids:""
    };
  },
  created() {
    this._getDevAreaTree();
  },
  methods: {
    //请求树形数据
    _getDevAreaTree() {
      getDevAreaTree().then((res) => {
        this.items = res.data;
        this._chexd();
      });
    },
    _getDeviceList() {
      getDeviceList({ params: this.devicefrom }).then((res) => {
        console.log(res);
        this.datas = res.data.data;
        this.total = res.data.total;
      });
    },
    //切换事件

    checked(value, label, extra) {
      console.log(extra.triggerNode);

      //判断是否选中值了
      if (extra.triggerNode) {
        //获取当前选中的对象信息
        const cont = extra.triggerNode.$attrs.cont;
        this.devicefrom.areaCode = cont.areacode;
        this._getDeviceList();
      }
    },
    // 默认展示数据
    _chexd() {
      //默认选择第一条数据
      const item = this.items[0];
      this.devicefrom.areaCode = item.areacode;
      this.value = item.areaname;
      this._getDeviceList();
    },
    //选中列表方法
    setSelectChange(select, text) {
      this.setsclete = select;
      let str = select.join(",");
      this.devIds = str;
      let arr = select.map((item) => {
        return Number(item);
      });
      console.log(arr);
      this.addtimefrom.devIds = JSON.stringify(arr);
    },
    batchdSelectChange(select, text) {
      this.batchdsetsclete = select;
      console.log(select)
      let str = select.join(",");
      this.ids = str
    },
    //时段下载点击
    TimeDownlode() {
      if (this.setsclete.length !== 0) {
        this.$refs.Mockdelete.visible = true;
      } else {
        this.$message.error("请选择数据");
      }
    },
    //搜索
    MockSearch() {
      this._getDeviceList();
    },
    //控制子节点
    textChange() {
      this.devicefrom.vChild = !this.devicefrom.vChild;
      this._getDeviceList();
    },
    //下载确定
    Mockdelete() {
      getDownload({ devIds: this.devIds })
        .then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
            this._getDeviceList();
            this.devIds = "";
            this.setsclete = [];
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$refs.Mockdelete.visible = false;
    },
    //
    settingedit() {
      if (this.setsclete.length == 0) {
        this.$message.error("请选择控制器");
      } else {
        this.Mokejust.title ="新增假日"
        this.Mokejust.visible = true;
      }
    },
    //弹窗确定
    mocksuns() {
      if (
        this.addtimefrom.startDate !== "" &&
        this.addtimefrom.endDate !== ""
      ) {
        if (this.addtimefrom.startDate <= this.addtimefrom.endDate) {
          getSaveHoliday(this.addtimefrom)
            .then((res) => {
              const msg = res.data.msg;
              if (res.data.success) {
                this.$message.success(msg);
                this.setsclete = [];
                this.addtimefrom.devIds = [];
                this.addtimefrom.startDate = "";
                this.addtimefrom.endDate = "";
                this.addtimefrom.id = 0;
                this.Mokejust.visible = false;
              } else {
                this.$message.error(msg);
                this.Mokejust.visible = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.error("开始时间不能大于结束时间");
        }
      } else {
        this.$message.error("时间不能为空");
      }
      this.addtimefrom.id = 0;
    },
    //弹窗取消
    mockhand() {
      this.Mokejust.visible = false;
      this.addtimefrom.startDate = "";
      this.addtimefrom.endDate = "";
      this.addtimefrom.id = 0;
    },
    //查看时段
    viewtime(text, tags, i) {
      console.log(tags);
      this.viewtimes.visible = true;
      this.devIds = tags.id;
      getHoliday({ params: { devId: this.devIds } }).then((res) => {
        this.timedatas = res.data;
      });
    },
    //时段弹窗确定
    viewsuns() {
      this.viewtimes.visible = false;
    },
    viewhand() {
      this.viewtimes.visible = false;
    },
    //修改假日
    etidtime(text, tags, i) {
      this.Mokejust.visible = true;
      console.log(tags, i);
      this.addtimefrom.id = tags.id;
    },
    //批量删除
    batchdownload(){
      if(this.batchdsetsclete.length !== 0){
       this.$refs.batchdelete.visible = true;
      }else {
        this.$message.error("请选择数据")
      }
     
    },
    //删除确定
    batchdelete(){
      deleteHoliday({ids:this.ids}).then(res=>{
        const msg = res.data.msg
        if(res.data.success){
          this.$message.success(msg)
        getHoliday({ params: { devId: this.devIds } }).then((res) => {
        this.timedatas = res.data;
      });
        }else{
          this.$message.error(msg)
        }
      }).catch(err=>{
        consoel.log(err)
      })
       this.$refs.batchdelete.visible = false;
    },
    //时间处理
    ondateChange(date, dateString) {
      this.addtimefrom.startDate = dateString;
    },
    endateChange(date, dateString) {
      this.addtimefrom.endDate = dateString;
    },
    // 分页操作功能
    setShowSizeChange(page, limit) {
      this.devicefrom.page = page;
      this.devicefrom.limit = limit;
      this.devicefrom.start = (page - 1) * limit;
      this._getDeviceList();
    },
    setPages(page, pageSize) {
      this.devicefrom.page = page;
      this.devicefrom.limit = pageSize;
      this.devicefrom.start = (page - 1) * pageSize;
      this._getDeviceList();
    },
  },
};
</script>

<style scoped lang="scss">
.search-a {
  width: 800px;
  height: 32px;
}
.ov_flex {
  display: flex;
  align-items: center;
}
#components-table-demo-size {
  margin-top: 15px;
}
.input-a {
  width: 300px;
  height: 32px;
  font-size: 12px;
  margin-right: 15px;
}
/deep/ .ant-input {
  height: 32px;
  font-size: 13px;
}
.chend {
  width: 300px;
  margin-left: 15px;
}
.logflex {
  display: flex;
}
.modal{
  z-index: 1000;
}
.btns{
  margin-left: 15px;
}
</style>